<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>我的订单</title>
</head>
<body>
<div id="app">
<el-container>
    <el-main>
        <!--条件查询-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="查询">
                <el-input v-model="findForm.key" placeholder="关键字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search()">查询</el-button>
            </el-form-item>
        </el-form>
        <!--展示我的订单-->
        <el-table :data="order" border>
            <el-table-column prop="no" label="订单号">
            </el-table-column>
            <el-table-column prop="coachName" label="教练">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="lessonName" label="课程">
            </el-table-column>
            <el-table-column prop="lessonTime" label="上课时间">
            </el-table-column>
            <el-table-column prop="price" label="金额">
            </el-table-column>
            <el-table-column prop="state" label="状态">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="pay(scope.row)" v-if="scope.row.state=='待支付'">付款</el-button>
                    <el-button type="text" size="small" @click="cancel(scope.row)" v-if="scope.row.state=='待支付'">取消</el-button>
                    <el-button type="text" size="small" @click="checkPay(scope.row)" v-if="scope.row.state=='已支付待完成'">上完课付款</el-button>
                    <el-button type="text" size="small" @click="applyBack(scope.row)" v-if="scope.row.state=='已支付待完成'">申请退款</el-button>
                    <el-button type="text" size="small" @click="comment(scope.row)" v-if="scope.row.state=='已完成'">评价</el-button>
                    <el-button type="text" size="small" @click="look(scope.row)" v-if="scope.row.state=='已完成'">查看评价</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageInfo.currentPage"
                    :page-sizes="[3, 4]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.total">
            </el-pagination>
        </div>
        <!--评价弹出框-->
        <el-dialog title="评价订单" :visible.sync="show" width="30%" style="font-size: 18px; font-weight: bold">
            <div class="block">
                <span class="demonstration" style="font-size: 16px; font-weight: bold">评分</span>
                <el-rate v-model="value"></el-rate>
            </div>
            <span style="font-size: 16px; font-weight: bold" placeholder="请输入评价">评价</span><br><br>
            <el-input v-model="content" style="font-size: 16px; font-weight: bold"></el-input>
            <span slot="footer" class="dialog-footer">
            <el-button @click="show=false">取 消</el-button>
            <el-button type="primary" @click="submit()">提 交</el-button>
        </span>
        </el-dialog>
        <!--评价内容对话框-->
        <el-dialog title="查看评价" :visible.sync="dialogVisible" width="30%">
            <el-rate v-model="showValue" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
            <span>{{showContent}}</span>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </el-main>
</el-container>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                pageInfo: {
                    currentPage: 1,// 当前页
                    size: 3,// 每页多少条
                    total: 1// 总条目数
                },
                order: [],
                show: false,
                value: null,// 评分
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                content: "",// 评价
                orderId: "",// 订单id
                dialogVisible: false,//评价查看对话框
                showValue: null,
                showContent: "",
                findForm:{
                    key: "",
                    size: 3,
                    page: 1
                }
            }
        },
        methods: {
            // 分页 - 更改每页条数
            handleSizeChange(val) {
                this.pageInfo.size = val
                this.getAll();
            },
            // 分页 - 更改当前页
            handleCurrentChange(val) {
                this.pageInfo.currentPage = val
                this.getAll();
            },
            // 获取所有
            getAll(){
                axios.get("/order/getMyOrder?page="+this.pageInfo.currentPage+"&size="+this.pageInfo.size).then(resp=>{
                    if(resp.status === resp.data.code){
                        this.order = resp.data.data.records
                        this.pageInfo.total = resp.data.data.total
                        console.log(this.order)
                    }
                })
            },
            // 条件查询
            search(){
                axios.get("/order/search", {params:this.findForm}).then(resp=>{
                    if(resp.status === resp.data.code){
                        this.order = resp.data.data.records
                        this.pageInfo.total = resp.data.data.total
                    }
                })
            },
            // 付款
            pay(row){
                this.$prompt('请输入支付密码', '提示', {confirmButtonText: '确定',cancelButtonText: '取消'}).then(({ value }) => {
                    axios.put("/order/pay?orderId="+row.orderId+"&password="+value).then(resp=>{
                        if(resp.status === resp.data.code){
                            this.$message({type: 'success',message: '支付成功'});
                            this.getAll()
                        }
                    });
                }).catch(() => {
                    this.$message({type: 'info',message: '取消支付'});
                });
            },
            // 未支付取消付款
            cancel(row){
                this.$confirm('确定取消吗?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消',type: 'info'}).then(() => {
                    axios.put("/order/cancel?orderId="+row.orderId).then(resp=>{
                        if(resp.status === resp.data.code){
                            this.$message({type: 'success',message: '取消成功'});
                            this.getAll()
                        }
                    });
                })
            },
            // 上完课付款
            checkPay(row){
                this.$prompt('请输入支付密码', '提示', {confirmButtonText: '确定',cancelButtonText: '取消'}).then(({ value }) => {
                    axios.put("/order/checkPay?orderId="+row.orderId+"&password="+value).then(resp=>{
                        if(resp.status === resp.data.code){
                            this.$message({type: 'success',message: '支付成功'});
                            this.getAll()
                        }
                    });
                }).catch(() => {
                    this.$message({type: 'info',message: '取消支付'});
                });
            },
            // 没上课申请退款
            applyBack(row){
                this.$prompt('请输入申请理由', '提示', {confirmButtonText: '确定',cancelButtonText: '取消'}).then(({ value }) => {
                    axios.put("/order/applyBack?orderId="+row.orderId+"&reason="+value).then(resp=>{
                        if(resp.status === resp.data.code){
                            this.$message({type: 'success',message: '申请已提交'});
                            this.getAll()
                        }
                    });
                }).catch(() => {
                    this.$message({type: 'info',message: '申请已取消'});
                });
            },
            // 评价订单
            comment(row){
                this.orderId = row.orderId
                this.show = true
            },
            // 提交评价
            submit(){
                let form = {
                    orderId: this.orderId,
                    score: this.value,
                    content: this.content
                }
                axios.post("/remark/add", form).then(resp=>{
                    if(resp.status === resp.data.code){
                        this.$message({type: 'success',message: '评价成功'});
                        this.show = false
                        this.getAll()
                    }
                });
            },
            // 查看评价
            look(row){
                axios.get("/remark/get?orderId="+row.orderId).then(resp=>{
                    if(resp.status === resp.data.code){
                        this.dialogVisible = true;
                        this.showValue = resp.data.data.score;
                        this.showContent = resp.data.data.content
                    }else{
                        this.$message({type: 'warning',message: '暂无评价'});
                    }
                })
            }
        },
        created() {
            this.getAll()
        }
    })
</script>
</body>
</html>